import React, { PureComponent } from 'react'
import { connect } from 'dva';
import { Card, Form } from 'antd';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
// 引入柱状图
import  'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title'
import ReactEcharts from 'echarts-for-react';

class App extends PureComponent {
    constructor(props) {
        super(props)
    }
    componentWillMount = () => {
        this.onSearch(1, 10);
    }
    //查询
    onSearch = (pageNum, pageSize) => {
        const { dispatch, form: { validateFields } } = this.props;
        validateFields((error, values) => {
            if (!!error) return;
            dispatch({
                type: "example2/findByDeleteqty",
                payload: { ...values, pageNum, pageSize }
            })
        })
    }
/*
* option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

* */
    getOption =()=> {
        const { dataSource } = this.props;
        let xAxisData=[];
        let yAxisData=[];
        if(!!dataSource.xAxis){
            xAxisData=dataSource.xAxis;
        }
        if(!!dataSource.yAxis){
            yAxisData=dataSource.yAxis;
        }
        let option = {
            title: { text: '删除量' },
            tooltip: {},
            xAxis: {
                data: xAxisData
            },
            yAxis: {type: 'value'},
            series: [{
                //name: '',
                type: 'line',
                data: yAxisData
            }]
        }
        return option
    }
    render() {

        return (
            <PageHeaderLayout>
                <Card className='hover-shadow'>
                    <ReactEcharts option={this.getOption()}  />
                </Card>
            </PageHeaderLayout >)
    }
}

export default connect(({ example2, loading }) => {
    const { dataSource } = example2;
    return {
        dataSource,
        loading: !!loading.effects['example2/findByDeleteqty']
    }
})(
    Form.create()(App)
)
